<template>
  <div
    v-if="activatedNode.compEventList.length > 0"
    class="event-box"
  >
    <div
      v-for="(event, index) in activatedNode.compEventList"
      :key="index"
      class="event-item"
    >
      <div class="event-item-name">{{event.name}}</div>
      <div class="event-item-operate">
        <ac-icon
          iconId="018dca6db20c6a3aaf68"
          title="编辑"
          style="margin-right: 8px"
          @click="editEvent(event)"
        />
        <ac-icon
          iconId="018dc9c3efd3a0502886"
          title="删除"
          color="red"
          @click="deleteEvent(index)"
        />
      </div>
    </div>
  </div>
  <div class="event-add-box" v-if="currEventList.length > 0">
    <div class="event-add" @click="addEvent">
      <ac-icon iconId="018dca3b4707c4c43a2f" />
      <span style="margin-left: 5px;font-size:13px">添加事件</span>
    </div>
  </div>
  <div v-else class="not-support">此组件不支持事件</div>

  <el-drawer
    v-model="dialogVisible"
    size="370px"
    title="事件编辑"
    class="dark-drawer-box"
    :close-on-click-modal="false"
    :with-header="false"
    destroy-on-close
  >
    <div class="common-box">
      <div class="common-item">
        <span class="label">事件名称：</span>
        <span class="content">
          <ac-select v-model="currCompEvent.name" :options="currEventList" size="small" />
        </span>
      </div>
    </div>
    <el-row v-if="currCompEvent.actionList.length > 0">
      <el-col :span="24">
        <el-collapse v-model="actionNames">
          <el-collapse-item
            v-for="(action, index) in currCompEvent.actionList"
            :key="index"
            :name="index"
            :title="action.name"
          >
            <template #title>
              <div class="collapse-item-header">
                <span>{{action.name}}</span>
                <span style="display: flex;">
                  <ac-icon
                    v-if="index > 0"
                    iconId="018fa3973ded010d7ef2"
                    title="上移"
                    color="#cccccc"
                    style="margin-right: 10px"
                    @click.stop="upAction(index)"
                  />
                  <ac-icon
                    v-if="index < currCompEvent.actionList.length - 1"
                    iconId="018fa397630c01052d7e"
                    title="下移"
                    color="#cccccc"
                    style="margin-right: 10px"
                    @click.stop="downAction(index)"
                  />
                  <ac-icon
                    iconId="018dc9c3efd3a0502886"
                    title="删除"
                    color="red"
                    style="margin-right: 10px"
                    @click.stop="deleteAction(index)"
                  />
                </span>
              </div>
            </template>
            <div class="common-box">
              <div class="common-item">
                <span class="label">动作名称：</span>
                <span class="content">
                  <ac-select
                    v-model="action.name"
                    size="small"
                    :options="compActionList"
                    @change="changeAction(action)"
                  />
                </span>
              </div>
            </div>
            <div class="common-box">
              <div class="common-item">
                <span class="label">判断条件：</span>
                <span class="content">
                  <ac-switch
                    v-model="action.condition"
                    :options="[
                      {key: true, value: ''},
                      {key: false, value: ''},
                    ]"
                    size="small"
                  />
                </span>
              </div>
            </div>
            <div v-if="action.condition" class="common-box">
              <div
                class="common-list"
                v-for="(condition, index) in action.conditionList || []"
                :key="index"
              >
                <div class="common-item" >
                  <span class="label">
                    <el-tooltip content="同分组为and，不同分组间为or">
                      <span>分组<ac-icon iconId="018dca8ec9890493be26" style="margin-left: 5px"/>：</span>
                    </el-tooltip>
                  </span>
                  <span class="content">
                    <el-input v-model="condition.group" size="small" />
                    <ac-icon
                      v-if="index > 0 && index < (action.conditionList || []).length"
                      iconId="018fa3973ded010d7ef2"
                      title="上移"
                      style="margin-left: 10px"
                      @click="moveConditionUp(index, action.conditionList)"
                    />
                    <ac-icon
                      v-if="index < (action.conditionList || []).length - 1"
                      iconId="018fa397630c01052d7e"
                      title="下移"
                      style="margin-left: 10px"
                      @click="moveConditionDown(index, action.conditionList)"
                    />
                    <ac-icon
                      iconId="018dc9c3efd3a0502886"
                      title="删除条件"
                      color="red"
                      style="margin-left: 10px"
                      @click="deleteCondition(index, action.conditionList)"
                    />
                  </span>
                </div>
                <div class="common-item">
                  <span class="label">条件：</span>
                  <span class="content">
                    <ac-select
                      v-model="condition.condition"
                      size="small"
                      :options="getEventOption()"
                    />
                  </span>
                </div>
                <div class="common-item">
                  <span class="label">类型：</span>
                  <span class="content">
                    <ac-select
                      v-model="condition.type"
                      size="small"
                      options="等于,不等于,包含,不包含,大于,大于等于,小于,小于等于"
                    />
                  </span>
                </div>
                <div class="common-item">
                  <span class="label">条件值：</span>
                  <span class="content">
                    <Component
                      :is="'ac-' + getFieldType(condition.condition)"
                      v-model="condition.value"
                      v-bind:compStyle="getFieldProp(condition.condition)"
                      size="small"
                    />
                  </span>
                </div>
              </div>
              <div class="event-add-box">
                <div class="event-add" @click="addCondition(action.conditionList)">
                  <ac-icon iconId="018dca3b4707c4c43a2f" />
                  <span style="margin-left: 5px;font-size:13px">添加条件</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '切换状态'" class="comp-box">
              <div style="margin-bottom: 5px">
                <el-input
                  v-model="filterStyleNodeName"
                  placeholder="组件搜索"
                  size="small"
                >
                  <template #suffix>
                    <ac-icon iconId="018dc9c3efe489a7d117" />
                  </template>
                </el-input>
              </div>
              <div
                v-for="node in getStyleNodeList(filterStyleNodeName)"
                :key="node.id"
                class="comp-list"
              >
                <div
                  :style='action.styleList && action.styleList[node.id] ? "color: #79bbff" : ""'
                  class="comp-item" @click="toggleNodeStyle(action, node.id)"
                >
                  <ac-icon
                    v-if="action.styleList && action.styleList[node.id]"
                    iconId="018ece4f6bf7915ea331"
                  />
                  <ac-icon
                    v-else
                    iconId="018f9ae7fa11010b3641"
                  />
                  <span>{{node.name}}</span>
                </div>
                <div v-if="action.styleList && action.styleList[node.id]" class="style-box">
                  <span
                    v-for="style in node.styleList"
                    :key="style.id"
                    class="style-list"
                    @click="toggleChangeStyle(action, node, style.id)"
                    :style='action.styleList && action.styleList[node.id] === style.id ? "color: #79bbff" : ""'
                  >
                    <ac-icon
                      v-if="action.styleList[node.id] === style.id"
                      iconId="018dca412c4e207388f7"
                    />
                    <ac-icon
                      v-else
                      iconId="018f68cc34330101d11d"
                    />
                    <span style="margin-right: 10px;font-size: 13px;">{{style.name}}</span>
                  </span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '表单校验'" class="comp-box">
              <div class="comp-list">
                <div
                  v-for="node in getFormList()"
                  :key="node.id"
                  class="comp-item"
                  @click="toggleForm(action, node.id)"
                >
                  <ac-icon
                    v-if="action.formList && action.formList.indexOf(node.id) >= 0"
                    iconId="018ece4f6bf7915ea331"
                    color="#409eff"
                  />
                  <ac-icon v-else iconId="018f9ae7fa11010b3641" />
                  <span
                    :style='action.formList && action.formList.indexOf(node.id) >= 0 ? "color: #79bbff" : ""'
                  >{{node.name}}</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '传递参数'" class="comp-box">
              <div style="margin-bottom: 5px">
                <el-input
                  v-model="filterParamNodeName"
                  placeholder="组件搜索"
                  size="small"
                >
                  <template #suffix>
                    <ac-icon iconId="018dc9c3efe489a7d117" />
                  </template>
                </el-input>
              </div>
              <div class="comp-list">
                <div
                  v-for="node in getParamNodeList(filterParamNodeName)"
                  :key="node.id"
                  class="comp-item-column"
                >
                  <div class="comp-item-label">
                    <ac-icon
                      v-if="action.paramList && action.paramList[node.id]"
                      iconId="018ece4f6bf7915ea331"
                      color="#409eff"
                    />
                    <ac-icon v-else iconId="018f9ae7fa11010b3641" />
                    <span
                      :style='action.paramList && action.paramList[node.id] >= 0 ? "color: #79bbff" : ""'
                      @click="toggleParam(action, node)"
                    >{{node.name}}</span>
                  </div>
                  <div class="content-list" v-if="action.paramList && action.paramList[node.id]">
                    <div
                      class="param-item"
                      v-for="(param, index) in action.paramList[node.id]"
                      :key="index"
                    >
                      <div class="param-field">
                        <el-input
                          v-if="param.input"
                          v-model="param.fieldName"
                          size="small"
                          :disabled="param.empty"
                        />
                        <ac-select
                          v-else
                          v-model="param.fieldName"
                          size="small"
                          :options="getEventOption()"
                          :disabled="param.empty"
                        />
                      </div>
                      <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
                      <div class="param-page">
                        <el-input v-model="param.name" size="small" disabled />
                      </div>
                      <div class="param-empty">
                        <ac-switch
                          v-model="param.empty"
                          title="是否传空值"
                          :options="[{key: true, value: ''}, {key: false, value: ''}]"
                          size="small"
                        />
                        <ac-switch
                          v-if="!param.empty"
                          v-model="param.input"
                          title="是否手动输入"
                          style="margin-left: 5px;"
                          :options="[{key: true, value: ''}, {key: false, value: ''}]"
                          size="small"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="action.name === '刷新组件'" class="comp-box">
              <div style="margin-bottom: 5px">
                <el-input
                  v-model="filterName"
                  placeholder="组件搜索"
                  size="small"
                >
                  <template #suffix>
                    <ac-icon iconId="018dc9c3efe489a7d117" />
                  </template>
                </el-input>
              </div>
              <div class="comp-list">
                <div
                  v-for="node in getNodeList(filterName)"
                  :key="node.id"
                  class="comp-item"
                  @click="toggleRefresh(action, node.id)"
                >
                  <ac-icon
                    v-if="action.refreshList && action.refreshList.indexOf(node.id) >= 0"
                    iconId="018ece4f6bf7915ea331"
                    color="#409eff"
                  />
                  <ac-icon v-else iconId="018f9ae7fa11010b3641" />
                  <span
                    :style='action.refreshList && action.refreshList.indexOf(node.id) >= 0 ? "color: #79bbff" : ""'
                  >{{node.name}}</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '调用脚本'" class="common-box">
              <div class="common-item">
                <span class="label">显示确认框：</span>
                <span class="content">
                  <ac-switch
                    v-model="action.confirm"
                    :options="[
                      {key: true, value: ''},
                      {key: false, value: ''},
                    ]"
                    size="small"
                  />
                </span>
              </div>
              <div class="common-item" v-if="action.confirm">
                <span class="label">确认框标题：</span>
                <span class="content">
                  <el-input v-model="action.confirmTitle" size="small" />
                </span>
              </div>
              <div class="common-item" v-if="action.confirm">
                <span class="label">确认框内容：</span>
                <span class="content">
                  <el-input v-model="action.confirmContent" size="small" />
                </span>
              </div>
              <div class="common-item">
                <span class="label">调用脚本：</span>
                <span class="content">
                  <ac-tree
                    v-model="action.scriptId"
                    data-url="/system/scriptGroovy/queryTree"
                    type-select="script"
                    size="small"
                  />
                </span>
              </div>
              <div class="param-box">
                <div
                  class="param-list"
                  v-for="(param, index) in action.paramList || []"
                  :key="index"
                >
                  <div class="param-item">
                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
                      <el-input v-model="param.name" placeholder="参数名" size="small" />
                    </div>
                    <div v-if="param.input" style="flex-grow: 1">
                      <el-input v-model="param.fieldName" title="参数值" size="small" />
                    </div>
                    <div v-else style="flex-grow: 1">
                      <ac-select
                        v-model="param.fieldName"
                        size="small"
                        :options="getNodeOptions()"
                        title="参数值"
                      />
                    </div>
                    <div style="margin-left: 5px;flex-shrink: 0">
                      <ac-switch
                        v-model="param.input"
                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
                        title="是否手动输入"
                        size="small"
                      />
                    </div>
                    <div class="icon">
                      <ac-icon
                        iconId="018dc9c3efd3a0502886"
                        title="删除"
                        color="red"
                        @click="action.paramList.splice(index, 1)"
                      />
                    </div>
                  </div>
                </div>
                <div class="middle-row">
                  <ac-icon iconId="018dca3b4707c4c43a2f" />
                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '操作数据'" class="common-box">
              <div class="common-item">
                <span class="label">显示确认框：</span>
                <span class="content">
                  <ac-switch
                    v-model="action.confirm"
                    :options="[
                      {key: true, value: ''},
                      {key: false, value: ''},
                    ]"
                    size="small"
                  />
                </span>
              </div>
              <div class="common-item" v-if="action.confirm">
                <span class="label">确认框标题：</span>
                <span class="content">
                  <el-input v-model="action.confirmTitle" size="small" />
                </span>
              </div>
              <div class="common-item" v-if="action.confirm">
                <span class="label">确认框内容：</span>
                <span class="content">
                  <el-input v-model="action.confirmContent" size="small" />
                </span>
              </div>
              <div class="common-item">
                <span class="label">调用脚本：</span>
                <span class="content">
                  <ac-tree
                    v-model="action.scriptId"
                    data-url="/system/scriptGroovy/queryTree"
                    type-select="script"
                    size="small"
                  />
                </span>
              </div>
              <div class="param-box">
                <div
                  class="param-list"
                  v-for="(param, index) in action.paramList || []"
                  :key="index"
                >
                  <div class="param-item">
                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
                      <el-input v-model="param.name" placeholder="参数名" size="small" />
                    </div>
                    <div v-if="param.input" style="flex-grow: 1">
                      <el-input v-model="param.fieldName" title="参数值" size="small" />
                    </div>
                    <div v-else style="flex-grow: 1">
                      <ac-select v-model="param.fieldName" :options="getNodeOptions()" title="参数值" size="small" />
                    </div>
                    <div style="margin-left: 5px;flex-shrink: 0">
                      <ac-switch
                        v-model="param.input"
                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
                        title="是否手动输入"
                        size="small"
                      />
                    </div>
                    <div class="icon">
                      <ac-icon
                        iconId="018dc9c3efd3a0502886"
                        title="删除"
                        color="red"
                        @click="action.paramList.splice(index, 1)"
                      />
                    </div>
                  </div>
                </div>
                <div class="middle-row">
                  <ac-icon iconId="018dca3b4707c4c43a2f" />
                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '链接页面'" class="common-box">
              <div class="common-item">
                <span class="label">链接页面：</span>
                <span class="content">
                  <ac-tree
                    v-model="action.linkPageId"
                    data-url="/system/page/queryTree"
                    typeSelect="page"
                    size="small"
                    @change="() => changePage(action)"
                  />
                </span>
              </div>
              <div
                v-if="'链接页面'.indexOf(action.name) >= 0
                  && action.linkPageId
                  && action.paramList
                  && action.paramList.length > 0"
                class="common-item"
              >
                <span class="label" style="align-self: flex-start">出参配置：</span>
                <div class="content-list">
                  <div
                    class="param-item"
                    v-for="(param, index) in action.paramList"
                    :key="index"
                  >
                    <div class="param-field">
                      <el-input
                        v-if="param.input"
                        v-model="param.value"
                        size="small"
                      />
                      <ac-select
                        v-else
                        v-model="param.fieldName"
                        size="small"
                        :options="getNodeOptions()"
                      />
                    </div>
                    <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
                    <div class="param-page">
                      <el-input v-model="param.pageParamName" size="small" disabled />
                    </div>
                    <div style="margin-left: 5px;flex-shrink: 0">
                      <ac-switch
                        v-model="param.input"
                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
                        title="是否手动输入"
                        size="small"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="common-item">
                <span class="label">链接方式：</span>
                <span class="content">
                  <ac-buttons v-model="action.linkType" options="弹窗,抽屉" size="small"  />
                </span>
              </div>
              <div class="common-item">
                <span class="label">可否编辑：</span>
                <span class="content">
                  <ac-switch
                    v-model="action.canEdit"
                    :options="[{key: true, value: ''}, {key: false, value: ''}]"
                    size="small"
                  />
                </span>
              </div>
              <div v-if="action.linkType !== '跳转'">
                <div class="common-item">
                  <span class="label">显示标题：</span>
                  <span class="content">
                    <ac-switch
                      v-model="action.showTitle"
                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
                      size="small"
                    />
                  </span>
                </div>
                <div class="common-item" v-if="action.showTitle">
                  <span class="label">标题名称：</span>
                  <span class="content">
                    <el-input v-model="action.title" size="small" />
                  </span>
                </div>
                <div class="common-item">
                  <span class="label">是否全屏：</span>
                  <span class="content">
                    <ac-switch
                      v-model="action.fullscreen"
                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
                      size="small"
                    />
                  </span>
                </div>
                <div class="common-item" v-if="!action.fullscreen">
                  <span class="label">窗口宽度：</span>
                  <span class="content">
                    <ac-input v-model="action.showWidth" size="small" />
                  </span>
                </div>
                <div class="common-item">
                  <span class="label" title="点击遮罩层关闭">点击遮罩层关闭：</span>
                  <span class="content">
                    <ac-switch
                      v-model="action.closeOnClickModal"
                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
                      size="small"
                    />
                  </span>
                </div>
                <div class="common-item">
                  <span class="label">显示页脚：</span>
                  <span class="content">
                    <ac-switch
                      v-model="action.showFooter"
                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
                      size="small"
                    />
                  </span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '跳转菜单'" class="common-box">
              <div class="common-item">
                <span class="label">跳转菜单：</span>
                <span class="content">
                  <ac-tree
                    v-model="action.gotoMenuId"
                    dataUrl="/system/menu/querySubsystemTree"
                    :leafSelect="true"
                    size="small"
                    @change="changeMenu(action)"
                  />
                </span>
              </div>
              <div class="common-item">
                <span class="label">跳转方式：</span>
                <span class="content">
                  <ac-buttons v-model="action.gotoType" options="本页跳转,新页面" size="small" />
                </span>
              </div>
              <div class="param-box">
                <div
                  class="param-list"
                  v-for="(param, index) in action.paramList || []"
                  :key="index"
                >
                  <div class="param-item">
                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
                      <el-input v-model="param.name" placeholder="参数名" size="small" />
                    </div>
                    <div v-if="param.input" style="flex-grow: 1">
                      <el-input v-model="param.fieldName" title="参数值" size="small" />
                    </div>
                    <div v-else style="flex-grow: 1">
                      <ac-select
                        v-model="param.fieldName"
                        size="small"
                        :options="getEventOption()"
                        title="参数值"
                      />
                    </div>
                    <div style="margin-left: 5px;flex-shrink: 0">
                      <ac-switch
                        v-model="param.input"
                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
                        title="是否手动输入"
                        size="small"
                      />
                    </div>
                    <div class="icon">
                      <ac-icon
                        iconId="018dc9c3efd3a0502886"
                        title="删除"
                        color="red"
                        @click="action.paramList.splice(index, 1)"
                      />
                    </div>
                  </div>
                </div>
                <div class="middle-row">
                  <ac-icon iconId="018dca3b4707c4c43a2f" />
                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '跳转大屏'" class="common-box">
              <div class="common-item">
                <span class="label">跳转大屏：</span>
                <span class="content">
                  <ac-tree
                    v-model="action.gotoDashboardId"
                    dataUrl="/system/page/queryTree"
                    :query="{type: '可视化', layoutMode: '大屏'}"
                    type-select="page"
                    size="small"
                    @change="changeDashboard(action)"
                  />
                </span>
              </div>
              <div class="common-item">
                <span class="label">跳转方式：</span>
                <span class="content">
                  <ac-buttons v-model="action.gotoType" options="本页跳转,新页面" size="small" />
                </span>
              </div>
              <div class="param-box">
                <div
                  class="param-list"
                  v-for="(param, index) in action.paramList || []"
                  :key="index"
                >
                  <div class="param-item">
                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
                      <el-input v-model="param.name" placeholder="参数名" size="small" />
                    </div>
                    <div v-if="param.input" style="flex-grow: 1">
                      <el-input v-model="param.fieldName" title="参数值" size="small" />
                    </div>
                    <div v-else style="flex-grow: 1">
                      <ac-select
                        v-model="param.fieldName"
                        size="small"
                        :options="getEventOption()"
                        title="参数值"
                      />
                    </div>
                    <div style="margin-left: 5px;flex-shrink: 0">
                      <ac-switch
                        v-model="param.input"
                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
                        title="是否手动输入"
                        size="small"
                      />
                    </div>
                    <div class="icon">
                      <ac-icon
                        iconId="018dc9c3efd3a0502886"
                        title="删除"
                        color="red"
                        @click="action.paramList.splice(index, 1)"
                      />
                    </div>
                  </div>
                </div>
                <div class="middle-row">
                  <ac-icon iconId="018dca3b4707c4c43a2f" />
                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
                </div>
              </div>
            </div>
            <div v-if="action.name === '关闭页面'" class="common-box">
              <div class="common-item">
                <span class="label">关闭方式：</span>
                <span class="content">
                  <ac-buttons v-model="action.closeType" options="当前窗口,当前页签" size="small" />
                </span>
              </div>
            </div>
            <div v-if="action.name === '跳转页面'" class="common-box">
              <div class="common-item">
                <span class="label">跳转页面：</span>
                <span class="content">
                  <ac-tree
                    v-model="action.gotoPageId"
                    data-url="/system/mobilePage/queryTree"
                    typeSelect="2"
                    :query="{mobileId: mobileId}"
                    @change="() => changeMobilePage(action, action.gotoPageId)"
                    size="small"
                  />
                </span>
              </div>
              <div
                v-if="type === '应用'"
                class="content-list"
                style="padding-left: 18px"
              >
                <div
                  class="param-item"
                  v-for="(param, index) in action.paramList"
                  :key="index"
                >
                  <div class="param-field">
                    <el-input
                      v-if="param.input"
                      v-model="param.fieldName"
                      size="small"
                      :disabled="param.empty"
                    />
                    <ac-select
                      v-else
                      v-model="param.fieldName"
                      size="small"
                      :options="getEventOption()"
                      :disabled="param.empty"
                    />
                  </div>
                  <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
                  <div class="param-page">
                    <el-input v-model="param.text" size="small" disabled />
                  </div>
                  <div class="param-empty">
                    <ac-switch
                      v-model="param.empty"
                      title="是否传空值"
                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
                      size="small"
                    />
                    <ac-switch
                      v-if="!param.empty"
                      v-model="param.input"
                      title="是否手动输入"
                      style="margin-left: 5px;"
                      :options="[{key: true, value: ''}, {key: false, value: ''}]"
                      size="small"
                    />
                  </div>
                </div>
              </div>
              <div v-if="type === '应用'" class="common-item">
                <span class="label">禁止返回：</span>
                <span class="content">
                  <ac-switch
                    v-model="action.forbidBack"
                    :options="[{key: true, value: ''}, {key: false, value: ''}]"
                    size="small"
                  />
                </span>
              </div>
            </div>
            <div v-if="action.name === '打开网址'" class="common-box">
              <div class="common-item">
                <span class="label">网址：</span>
                <span class="content">
                  <el-input
                    v-if="action.websiteInput"
                    v-model="action.website"
                    title="网址"
                    size="small"
                  />
                  <ac-select
                    v-else
                    v-model="action.website"
                    size="small"
                    :options="getEventOption()"
                    title="网址"
                  />
                  <ac-switch
                    style="margin-left: 5px"
                    v-model="action.websiteInput"
                    :options="[{key: true, value: ''}, {key: false, value: ''}]"
                    title="是否手动输入"
                    size="small"
                  />
                </span>
              </div>
            </div>
            <div v-if="action.name === '系统登录'" class="common-box">
              <div class="param-box">
                <div
                  class="param-list"
                  v-for="(param, index) in action.paramList || []"
                  :key="index"
                >
                  <div class="param-item">
                    <div style="width: 120px;margin-right: 5px;flex-shrink: 0">
                      <el-input v-model="param.name" placeholder="参数名" size="small" />
                    </div>
                    <div v-if="param.input" style="flex-grow: 1">
                      <el-input v-model="param.fieldName" title="参数值" size="small" />
                    </div>
                    <div v-else style="flex-grow: 1">
                      <ac-select
                        v-model="param.fieldName"
                        size="small"
                        :options="getNodeOptions()"
                        title="参数值"
                      />
                    </div>
                    <div style="margin-left: 5px;flex-shrink: 0">
                      <ac-switch
                        v-model="param.input"
                        :options="[{key: true, value: ''}, {key: false, value: ''}]"
                        title="是否手动输入"
                        size="small"
                      />
                    </div>
                    <div class="icon">
                      <ac-icon
                        iconId="018dc9c3efd3a0502886"
                        title="删除"
                        color="red"
                        @click="action.paramList.splice(index, 1)"
                      />
                    </div>
                  </div>
                </div>
                <div class="middle-row">
                  <ac-icon iconId="018dca3b4707c4c43a2f" />
                  <span style="font-size: 13px" @click="addParam(action)">添加参数</span>
                  <ac-icon style="margin-left: 15px" iconId="018ece4f72d1bf69178b" />
                  <span style="font-size: 13px" @click="addAllParam(action)">一键添加</span>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <div class="action-add-box">
      <div class="action-add" @click="addAction">
        <ac-icon iconId="018dca3b4707c4c43a2f" />
        <span style="margin-left: 5px;font-size:13px">添加动作</span>
      </div>
    </div>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="dialogVisible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        @click="submitEventForm"
      >确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch, onMounted, inject } from 'vue';
import { useAdminVisualCompStore } from '@/admin/visual/js/visual-comp';
import { components } from './js/component.config';
import tool from "@/utils/tool";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "@/http/api";

const emit = defineEmits(['change']);
const props = defineProps({
  type: String,
  mobileId: String
});
const rootNode = inject('rootNode');
const visualComp = useAdminVisualCompStore();
const activatedNode = inject('activatedNode');
const compEventList = ref([]);
const currEventList = ref([]);
const compActionList = ref('切换状态,传递参数,刷新组件,调用脚本,操作数据,链接页面,跳转菜单,打开网址,关闭页面,系统登录');

const dialogVisible = ref(false);
const currCompEvent = ref({});
const actionNames = ref([0]);
const filterName = ref('');
const filterParamNodeName = ref('');
const filterStyleNodeName = ref('');

const addEvent = () => {
  const event = { id: tool.uuids(), actionList: [] };
  currCompEvent.value = tool.deepClone(event);
  dialogVisible.value = true;
};

const editEvent = (event) => {
  currCompEvent.value = tool.deepClone(event);
  dialogVisible.value = true;
};

const deleteEvent = (index) => {
  ElMessageBox.confirm("请确认是否删除？", "提示", { type: "warning" }).then(() => {
    activatedNode.value.compEventList.splice(index, 1);
    emit('change');
  }).catch(() => {});
};

const addAction = () => {
  currCompEvent.value.actionList.push({
    condition: false,
    conditionList: [{}],
    linkType: '弹窗',
    showTitle: true,
    showFooter: true,
    fullscreen: true,
    showWidth: '800px',
    gotoType: '本页跳转',
    closeType: '当前窗口'
  });
  actionNames.value.push(currCompEvent.value.actionList.length - 1);
};

const upAction = (index) => {
  if (index <= 0) return;
  const currAction = currCompEvent.value.actionList[index - 1];
  currCompEvent.value.actionList[index - 1] = currCompEvent.value.actionList[index];
  currCompEvent.value.actionList[index] = currAction;
};

const downAction = (index) => {
  if (index >= currCompEvent.value.actionList.length) return;
  const currAction = currCompEvent.value.actionList[index + 1];
  currCompEvent.value.actionList[index + 1] = currCompEvent.value.actionList[index];
  currCompEvent.value.actionList[index] = currAction;
};

const deleteAction = (index) => {
  ElMessageBox.confirm("请确认是否删除？", "提示", { type: "warning" }).then(() => {
    currCompEvent.value.actionList.splice(index, 1);
  }).catch(() => {});
};

const changeAction = (action) => {
  if (action.name === '系统登录') {
    if (!action.paramList || action.paramList.length === 0) {
      action.paramList = [];
      action.paramList.push({name: 'username'});
      action.paramList.push({name: 'password'});
    }
  }
};

const addCondition = (list) => {
  list.push({});
};

const deleteCondition = (index, list) => {
  ElMessageBox.confirm("请确认是否删除？", "提示", { type: "warning" }).then(() => {
    list.splice(index, 1);
  }).catch(() => {});
};

const moveConditionUp = (index, list) => {
  const curr = list[index];
  list[index] = list[index - 1];
  list[index - 1] = curr;
};

const moveConditionDown = (index, list) => {
  const curr = list[index];
  list[index] = list[index + 1];
  list[index + 1] = curr;
};

const submitEventForm = () => {
  if (!currCompEvent.value.name) {
    ElMessage.error("事件名称不能为空！");
    return;
  }
  if (!currCompEvent.value.actionList || currCompEvent.value.actionList.length === 0) {
    ElMessage.error("请先添加动作！");
    return;
  }
  for (const action of currCompEvent.value.actionList) {
    if (!action.name) {
      ElMessage.error("动作名称不能为空！");
      return;
    }
  }

  const index = activatedNode.value.compEventList.findIndex(item => item.id === currCompEvent.value.id);
  if (index >= 0) {
    activatedNode.value.compEventList[index] = currCompEvent.value;
  } else {
    activatedNode.value.compEventList.push(currCompEvent.value);
  }

  dialogVisible.value = false;
  emit('change');
};

const getCompEventList = async(type) => {
  if (type) {
    if (!compEventList.value[type]) {
      const comp = await visualComp.getVisualComp(type);
      compEventList.value[type] = comp && comp.eventList || [];
    }
    return tool.deepClone(compEventList.value[type]);
  } else {
    return [];
  }
};

const createCompEvent = (data, children) => {
  (children || []).forEach(item => {
    if (item.type && item.eventList) data[item.type] = item.eventList;
    createCompEvent(data, item.children);
  });
};

const toggleNodeStyle = (item, nodeId) => {
  if (!item.styleList) {
    item.styleList = {};
  }

  if (item.styleList[nodeId]) {
    delete item.styleList[nodeId];
  } else {
    item.styleList[nodeId] = '--';
  }
};

const toggleChangeStyle = (item, node, styleId) => {
  if (!item.styleList) {
    item.styleList = {};
  }

  item.styleList[node.id] = styleId
};

const toggleForm = (item, nodeId) => {
  if (!item.formList) {
    item.formList = [];
  }

  const index = item.formList.findIndex(id => id === nodeId);
  if (index >= 0) {
    item.formList.splice(index, 1);
  } else {
    item.formList.push(nodeId);
  }
};

const toggleRefresh = (item, nodeId) => {
  if (!item.refreshList) {
    item.refreshList = [];
  }

  const index = item.refreshList.findIndex(id => id === nodeId);
  if (index >= 0) {
    item.refreshList.splice(index, 1);
  } else {
    item.refreshList.push(nodeId);
  }
};

const toggleParam = (item, node) => {
  if (!item.paramList) {
    item.paramList = {};
  }

  if (item.paramList[node.id]) {
    delete item.paramList[node.id];
    return;
  } else {
    item.paramList[node.id] = [];
  }

  const paramList = [];
  node.compData.inputParamList.forEach(param => {
    const find = item.paramList[node.id].find(it => it.id === param.id);
    if (find) {
      paramList.push(find);
    } else {
      paramList.push(tool.deepClone(param));
    }
  });
  item.paramList[node.id] = paramList;
};

const addParam = (item) => {
  if (!item) return;
  if (!item.paramList || !Array.isArray(item.paramList)) {
    item.paramList = [];
  }

  item.paramList.push({input: false, name: '', value: ''});
};

const addAllParam = (item) => {
  if (!item) return;
  if (!item.paramList || !Array.isArray(item.paramList)) {
    item.paramList = [];
  }

  (getNodeOptions() || []).forEach(option => {
    item.paramList.push({
      input: false,
      name: option.value && option.value.indexOf('.') ? option.value.split('.')[0] : option.value,
      fieldName: option.key
    });
  });
};

const getStyleNodeList = (filter) => {
  const list = [];
  tool.walkTree(rootNode.value, (node) => {
    if (node.styleList && node.styleList.length > 1 && (!filter || node.name.indexOf(filter) >= 0)) {
      list.push(node);
    }
  });
  return list;
};

const getNodeList = (filter) => {
  const list = [];
  tool.walkTree(rootNode.value, (node) => {
    if (node.id && node.builtin !== true && (!filter || node.name.indexOf(filter) >= 0)) {
      list.push(node);
    }
  });
  return list.sort((a, b) => a.name.localeCompare(b.name));
};

const getFormList = () => {
  const list = [];
  tool.walkTree(rootNode.value, (node) => {
    if (node.id && node.type === 'form') {
      list.push(node);
    }
  });
  return list.sort((a, b) => a.name.localeCompare(b.name));
};

const getNode = (nodeId, tree) => {
  for (let node of tree.children || []) {
    if (node.id && node.id === nodeId) {
      return node;
    }

    const result = getNode(nodeId, node);
    if (result) return result;
  }
};

const changePage = (action) => {
  if (!action.linkPageId) {
    action.paramList = [];
    return;
  }

  api.post('/system/pageParam/queryList', {pageId: action.linkPageId}).then(res => {
    const pageParamList = res.data || [];
    let paramList = action.paramList || [];
    pageParamList.forEach(pageParam => {
      const fieldParam = paramList.find(item => item.pageParamId === pageParam.id);
      if (fieldParam) {
        fieldParam.pageParamName = pageParam.name;
      } else {
        paramList.push({pageParamId: pageParam.id, pageParamName: pageParam.name});
      }
    });

    paramList = paramList.filter(param => pageParamList.find(item => item.id === param.pageParamId));
    action.paramList = paramList;
  });
};

const getEventOption = () => {
  const options = getEventData();
  options.push(...getInputOptions());
  options.push(...getNodeOptions());
  return options;
};

const changeMobilePage = (action, pageId) => {
  if (!pageId) return;
  action.paramList = [];

  api.post('/system/mobilePage/queryBy', {id: pageId}).then(res => {
    if (res && res.data && res.data.jsonText) {
      const json = JSON.parse(res.data.jsonText);
      (json?.compData?.inputParamList || []).forEach(param => {
        action.paramList.push({fieldName: '', name: param.id, text: param.name});
      });
    }
  });
};

const changeMenu = (action) => {
  if (!action.gotoMenuId) {
    action.paramList = [];
    return;
  }

  api.post('/system/pageParam/queryListByMenuId', {id: action.gotoMenuId}).then(res => {
    const pageParamList = res.data || [];
    let paramList = action.paramList || [];
    pageParamList.forEach(pageParam => {
      const fieldParam = paramList.find(item => item.pageParamId === pageParam.id);
      if (fieldParam) {
        fieldParam.name = pageParam.name;
      } else {
        paramList.push({pageParamId: pageParam.id, name: pageParam.name});
      }
    });

    paramList = paramList.filter(param => pageParamList.find(item => item.id === param.pageParamId));
    action.paramList = paramList;
  });
};

const changeDashboard = (action) => {
  if (!action.gotoDashboardId) {
    action.paramList = [];
    return;
  }

  api.post('/system/pageParam/queryList', {pageId: action.gotoDashboardId}).then(res => {
    const pageParamList = res.data || [];
    let paramList = action.paramList || [];
    pageParamList.forEach(pageParam => {
      const fieldParam = paramList.find(item => item.pageParamId === pageParam.id);
      if (fieldParam) {
        fieldParam.name = pageParam.name;
      } else {
        paramList.push({pageParamId: pageParam.id, name: pageParam.name});
      }
    });

    paramList = paramList.filter(param => pageParamList.find(item => item.id === param.pageParamId));
    action.paramList = paramList;
  });
};

const getInputOptions = () => {
  const options = [];
  (activatedNode.value.compData.inputParamList || []).forEach(param => {
    options.push({
      key: 'inputParam.' + param.id,
      value: '[组件入参].' + param.name
    });
  });
  return options;
};

const getNodeOptions = () => {
  const options = [];
  tool.walkTree(rootNode.value, (node) => {
    if (node.builtin) return;
    if (node.currCompStyle && node.currCompStyle.columnList) {
      options.push({key: node.id + '.col', value: node.name + '.点击列'});
      options.push({key: node.id + '.row.value', value: node.name + '.点击行.值'});
      node.currCompStyle.columnList.forEach(column => {
        options.push({
          key: node.id + '.row.value.' + column.label,
          value: node.name + '.点击行.' + column.label + '.值'
        });
      });
    } else if (node.type.endsWith("-list") && node.compData && node.compData.fieldList) {
      options.push({key: node.id + '.row.value', value: node.name + '.点击项.值'});
      node.compData.fieldList.forEach(column => {
        options.push({
          key: node.id + '.row.value.' + column.name,
          value: node.name + '.点击项.' + column.name + '.值'
        });
      });
      options.push({key: node.id + '.value', value: node.name + '.值'});
    } else {
      if (!node.type || node.type === 'form-item' || !node.type.startsWith('form-')) return;
      options.push({key: node.id + '.value', value: node.name + '.值'});
    }
  });
  return options.sort((a, b) => a.value.localeCompare(b.value));
};

const getEventData = () => {
  const result = getFieldDataNames();
  if (currCompEvent.value.name === '点击条目事件'
    || currCompEvent.value.name === '点击坐标轴事件'
    || currCompEvent.value.name === '点击数据项事件') {
    result.push({key: 'event.data.系列名', value: '[事件数据].系列名'});
    result.push({key: 'event.data.系列值', value: '[事件数据].系列值'});
  }
  return result;
};

const getFieldDataNames = () => {
  if (activatedNode.value.compData && activatedNode.value.compData.fieldList) {
    const result = [];
    activatedNode.value.compData.fieldList.forEach(field => {
      result.push({key: 'event.data.' + field.name, value: '[事件数据].' + field.name + '.值'});
    });
    return result;
  }
  return []
};

const getParamNodeList = (filter) => {
  const paramNodeList = [];
  tool.walkTree(rootNode.value, (node) => {
    if (node.compData
      && node.compData.inputParamList
      && node.compData.inputParamList.length > 0
      && (!filter || node.name.indexOf(filter) >= 0)) {
      paramNodeList.push(node);
    }
  });
  return paramNodeList.sort((a, b) => a.name.localeCompare(b.name));
};

const getFieldType = (nodeId) => {
  if (!nodeId) return 'input';

  return (getNode(nodeId, rootNode.value) || {}).type || 'input';
};

const getFieldProp = (nodeId) => {
  if (!nodeId) return {};

  if (nodeId.indexOf(".") >= 0) {
    nodeId = nodeId.split(".")[0];
  }

  const node = (getNode(nodeId, rootNode.value) || {});
  return node && node.styleList && node.styleList.length > 0 ? cleanProp(node?.styleList[0].compStyle) : {};
};

const cleanProp = (data) => {
  const clone = tool.deepClone(data);
  const result = {};
  for (let p in clone) {
    if (p !== 'name'
      && p !== 'fieldName'
      && p !== 'fieldType'
      && p !== 'default'
      && p !== 'description'
      && p !== 'show'
      && typeof clone[p] !== 'function') {
      if (p === 'options' && clone[p] === 'formItemOptions') {
        result[p] = getFormItemOptions();
      } else {
        result[p] = clone[p];
      }
    }
  }
  return result;
};

const getFormItemOptions = () => {
  const options = [];
  tool.walkTree(rootNode.value, node => {
    if (node.id && node.formItem === '1') {
      options.push({key: node.id, value: node.name});
    }
  });
  return options;
};

const init = () => {
  if (props.type && props.type === '应用') {
    compActionList.value = '切换状态,表单校验,传递参数,刷新组件,调用脚本,操作数据,跳转页面,打开网址,系统登录,退出登录';
  } else {
    compActionList.value = '切换状态,表单校验,传递参数,刷新组件,调用脚本,操作数据,链接页面,跳转菜单,跳转大屏,打开网址,关闭页面';
  }

  getCompEventList(activatedNode.value.type).then(res => {
    currEventList.value = res || [];
  });
};

watch(() => activatedNode.value.id, () => {
  init();
});

onMounted(() => {
  createCompEvent(compEventList.value, components);
  init();
});
</script>

<style scoped lang="scss">
.not-support {
  color: #dcdcdc;
  padding: 8px;
  text-align: center;
  width: 100%;
}
.event-box {
  display: flex;
  flex-direction: column;
  margin: 8px;
  .event-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px;
    margin: 5px;
    color: #dcdcdc;
    border: 1px solid rgb(31, 31, 31);
    border-radius: 5px;
    .ac-icon {
      cursor: pointer;
    }
  }
}
.event-add-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 8px;
  color: #dcdcdc;
  height: 30px;
  .event-add {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.common-box {
  flex-grow: 1;
  overflow: auto;
  margin: 5px;
  :deep(.el-collapse-item__wrap) {
    padding: 2px 0;
    background: #555555!important;
  }
  .common-list {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(51, 51, 51);
    &:nth-last-child(2) {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }
  }
  .ac-icon {
    flex-shrink: 0;
    cursor: pointer;
  }
}
.common-item {
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px 3px;
  .label {
    font-size: 13px;
    width: 80px;
    color: #dcdcdc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    :deep(.label-name) {
      width: 90px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
      display: block;
    }
  }
  .content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  :deep(.el-radio-button) {
    --el-radio-button-checked-bg-color: #555;
    --el-radio-button-checked-text-color: #dcdcdc;
    --el-radio-button-checked-border-color: #333;
    --el-radio-button-disabled-checked-fill: #333;
  }
  :deep(.el-radio-button) .el-radio-button__inner {
    color: #dcdcdc;
    background: #555555;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 5px 6px;
  }
  :deep(.el-radio-button:first-child) .el-radio-button__inner {
    border-left: 1px solid #333;
  }
  :deep(.el-radio-button).is-active .el-radio-button__inner {
    background: #333!important;
  }
}
.content-list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  .param-item {
    display: flex;
    flex-direction: row;
    .param-field {
      width: 1px;
      flex-grow: 1;
    }
    .param-split {
      width: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
    .param-page {
      width: 90px;
      flex-shrink: 1;
    }
    .param-empty {
      width: 65px;
      margin-left: 5px;
    }
  }
  .param-item+.param-item {
    margin-top: 5px;
  }
}
.collapse-item-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.comp-box {
  padding: 5px 10px 5px 30px;
  color: #dcdcdc;
  .ac-icon {
    margin-right: 5px;
  }
  .comp-list {
    display: flex;
    flex-direction: column;
    max-height: 350px;
    overflow: auto;
    .comp-item {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      align-items: center;
      cursor: pointer;
      width: fit-content;
      font-size: 13px;
      .content-list {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .param-item {
          display: flex;
          flex-direction: row;
          .param-field {
            flex-grow: 1;
          }
          .param-split {
            width: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
          }
          .param-page {
            width: 100px;
          }
          .param-empty {
            width: 70px;
            margin-left: 5px;
          }
        }
        .param-item+.param-item {
          margin-top: 5px;
        }
      }
    }
    .comp-item-column {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      cursor: pointer;
      .comp-item-label {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 13px;
      }
      .content-list {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        .param-item {
          display: flex;
          flex-direction: row;
          .param-field {
            width: 115px;
          }
          .param-split {
            width: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
          }
          .param-page {
            max-width: 80px;
            flex-grow: 1;
          }
          .param-empty {
            width: 65px;
            margin-left: 5px;
          }
        }
        .param-item+.param-item {
          margin-top: 5px;
        }
      }
    }
    .style-box {
      margin-left: 20px;
      .style-list {
        cursor: pointer;
        white-space: nowrap;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
}
.param-box {
  padding: 5px 8px 5px 10px;
  color: #dcdcdc;
  .ac-icon {
    margin-right: 5px;
  }
  .param-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    .param-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      div {
        flex-shrink: 1;
      }
      .icon {
        margin-left: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .ac-icon {
          margin-right: 0;
        }
      }
    }
  }
}
.action-add-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 8px;
  color: #dcdcdc;
  height: 30px;
  .action-add {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.middle-row {
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  span {
    cursor: pointer;
  }
}
</style>